<template>
    <div class="padding20">
        <!--列表页-->
        <div v-show="showList">
            <!--条件查询-->
            <el-form :model="queryParam" label-position="left" size="small">
                <el-row :gutter="50" justify="start">
                    <el-col :xs="12" :sm="7">
                        <el-form-item prop="time">
                            <el-date-picker
                                    unlink-panels
                                    style="width: 100%"
                                    v-model="queryParam.time"
                                    type="monthrange"
                                    align="right"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="日期"
                                    end-placeholder="日期"
                                    :picker-options="quickPickerOptions"/>
                        </el-form-item>
                    </el-col>
                    <!--展开/收起-->
                    <el-col :xs="showMoreSearch?24:13" :sm="showMoreSearch?24:7">
                        <div style="float: left;overflow: hidden;">
                            <el-button size="small" @click="selectPage" type="primary">查询</el-button>
                            <el-button size="small" @click="clearParam">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <!--操作按钮-->
            <div class="mi-container">
                <el-button size="mini" class="mi-item" type="primary" icon="el-icon-plus"
                           @click="show('insert')">新增动态人力资源信息
                </el-button>
            </div>

            <!--表格数据-->
            <el-table  empty-text="当前条件下，暂无匹配数据"
                       :data="tableData"
                      border fit style="width: 100%;"
                      highlight-current-row show-overflow-tooltip
                      @selection-change="selectionChange">
                <el-table-column label="日期" prop="dataMonth" align="center">
                    <template slot-scope="scope">
                        {{scope.row.dataMonth | subStr(-3)}}
                    </template>
                </el-table-column>
                <el-table-column label="公司名" prop="companyName" align="center"/>
                <el-table-column label="上月末从业人员数" prop="beforeMonthEndWorkCount" align="center"/>
                <el-table-column label="本期实际招工人数" prop="realWorkCount" align="center"/>
                <el-table-column label="本月缺工人员数" prop="thisMonthLackCount" align="center"/>
                <el-table-column label="操作" width="230" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" plain size="mini" @click="show('update',scope.row)">
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页插件-->
            <Pagination @pagination="selectPage"
                        v-show="pageParam.pages>0"
                        :total-data-num="pageParam.total"
                        :current-page="pageParam.current"
                        :page-size="pageParam.size"/>
        </div>

        <!--编辑（新增/修改）-->
        <transition name="el-fade-in">
            <DynamicHumanGEdit v-if="showEdit" :mData="viewData" :option="viewOption" @close="close"/>
        </transition>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Pagination from "@/components/Pagination/Pagination.vue";
    import Kit from "@/core/mixin/Kit";
    import {infoMsg, successMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import DynamicHumanGEdit from "@/views/government/company/dynamic-human-info/edit.vue";

    @Component({
        name: 'DynamicHumanGList',
        components: {
            Pagination,
            DynamicHumanGEdit,
        },
    })

    export default class DynamicHumanGList extends mixins(BaseVue, Kit) {
        get companyId() {
            return this.$route.query.id;
        }

        get companyUserId() {
            return this.$route.query.userId;
        }

        get companyUserAccount() {
            return this.$route.query.userAccount;
        }

        //初始化
        async mounted() {
            this.selectPage();
        }

        //查询分页
        selectPage(page: any = null) {
            this.queryParam.companyId = this.companyId;
            this.pageData(API.dynamicHumanInfoPage, page)
                .then((res: any) => {
                })
        }

        //处理更多按钮事件
        handleCommand(command: any, index: any, row: any) {
            switch (command) {
                case "delete":
                    this.delete(row.id);
                    break;
            }
        }

        delete(id: any) {
            this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $http.post(API.dynamicHumanInfoDelete, [id]).then((res: any) => {
                    if (res.success) {
                        this.selectPage();
                        successMsg("已删除");
                    }
                });
            }).catch(() => {
                infoMsg("已取消!")
            });
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }


        //切换视图
        show(type: any, data: any = {}) {
            //赋值
            this.viewData = data;
            this.viewOption.type = type;
            this.viewData.companyUserId = this.companyUserId;
            this.viewData.companyUserAccount = this.companyUserAccount;

            //新增
            if (type == "insert") {
                this.viewOption.title = '新增动态人力资源信息';
                this.showEdit = true;
                this.showList = false;
            }

            //修改
            if (type == "update") {
                this.viewOption.title = '修改动态人力资源信息';
                this.showEdit = true;
                this.showList = false;
            }
        }

        //视图关闭回调
        close(obj: any = {}) {
            this.showInfo = false;
            this.showEdit = false;
            setTimeout(() => {
                this.showList = true;
                if (obj.refresh) {
                    this.selectPage();
                }
            }, 200);
        }
    }

</script>

<style scoped type="scss">
</style>


